<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableBtns="tableBtns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
    <AddSNDevice
      v-if="addSNDeviceVisible"
      @refreshTable="refreshTable"
      :row="row"
      :visible.sync="addSNDeviceVisible"
    />
    <SNBatchUpload
      v-if="snBatchUploadVisible"
      :visible.sync="snBatchUploadVisible"
      @refreshTable="refreshTable"
      :dialog-type="dialogType"
    ></SNBatchUpload>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import AddSNDevice from './components/AddSNDevice'
import SNBatchUpload from './components/SNBatchUpload'
import { snCodePage, snCodeUnbind } from '@/api/device'
import formatter from '@/utils/format'
export default {
  name: 'SnCodeList',
  components: { TableSearch, AddSNDevice, SNBatchUpload },
  data() {
    return {
      loading: false,
      form: {},
      tableBtns: [
        {
          label: '绑定SN编码',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/device-management/sn-code/绑定SN编码',
        },
        {
          label: 'Excel批量绑定',
          click: () => this.handleBatchUpload('BatchAdd'),
          icon: 'el-icon-plus',
          resourceId: '/web/device-management/sn-code/批量导入',
        },
        {
          label: '(批量绑定模板下载)',
          isDownload: true,
          href: require('../../assets/batchTemplate/SN编码批量绑定模板.xlsx'),
          fileName: 'SN编码批量绑定模板',
          resourceId: '/web/device-management/sn-code/批量导入',
        },
        {
          label: 'Excel批量删除',
          click: () => this.handleBatchUpload('BatchDelete'),
          icon: 'el-icon-delete',
          type: 'warning',
          resourceId: '/web/device-management/sn-code/批量删除',
        },
        {
          label: '(批量删除模板下载)',
          isDownload: true,
          href: require('../../assets/batchTemplate/SN编码批量删除模板.xlsx'),
          fileName: 'SN编码批量删除模板',
          resourceId: '/web/device-management/sn-code/批量删除',
        },
      ],
      searchPath: '/web/device-management/sn-code/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'deviceNum',
          placeholder: '请输入设备号',
          clearable: true,
        },
        {
          type: 'text',
          value: 'snCode',
          placeholder: '请输入SN编码',
          clearable: true,
        },
      ],
      tableData: {},
      columns: [
        {
          label: '设备号',
          prop: 'deviceNum',
          resourceId: '/web/device-management/sn-code/设备号',
        },
        {
          label: '所属电站',
          prop: 'stationName',
          resourceId: '/web/device-management/sn-code/所属电站',
        },
        {
          label: '所属运营商',
          prop: 'mchName',
          resourceId: '/web/device-management/sn-code/所属运营商',
        },
        {
          label: 'SN编码',
          prop: 'snCode',
          resourceId: '/web/device-management/sn-code/SN编码',
        },
        {
          label: '添加时间',
          prop: 'createTime',
          resourceId: '/web/device-management/sn-code/添加时间',
          formatter,
        },
        {
          label: '操作',
          resourceId: '/web/device-management/sn-code/操作',
          buttons: [
            {
              label: '编辑',
              size: 'small',
              click: this.handleEdit,
              resourceId: '/web/device-management/sn-code/编辑',
            },
            {
              label: '删除',
              size: 'small',
              click: this.handleDel,
              resourceId: '/web/device-management/sn-code/删除',
            },
          ],
        },
      ],
      addSNDeviceVisible: false,
      snBatchUploadVisible: false,
    }
  },
  methods: {
    reset() {
      this.form = {}
    },
    handleTableData(params) {
      this.loading = true
      snCodePage(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    refreshTable() {
      this.$refs.tableSearch.refreshTable()
    },
    handleDel(row) {
      this.$confirm('您确定要删除这条记录吗？', '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      })
        .then(() => {
          snCodeUnbind({
            id: row.id,
          }).then(() => {
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
    handleEdit(row) {
      this.addSNDeviceVisible = true
      this.row = row
    },
    handleAdd() {
      this.addSNDeviceVisible = true
      this.row = {}
    },
    handleBatchUpload(type) {
      this.snBatchUploadVisible = true
      this.dialogType = type
    },
  },
}
</script>
